<template>
	<view class="newOrder">
		<view class="form">
			<view class="form_item">
				<view class="text"><text>*</text>客户:</view>
				<view class="input1">
					<input v-model="user" type="text" />
					<view @tap="open" class="btn1"> 选择 </view>
				</view>
			</view>
			<view class="form_item">
				<view class="text"> 订单日期 :</view>
				<view class="input">
					<input v-model="time" @tap="show1 = true" type="text" />
				</view>
			</view>
			<view class="form_item">
				<view class="text"> 出货量: </view>
				<view class="input"> {{ ShipmenNum }} </view>
			</view>
			<view class="form_item">
				<view class="text"> 出货金额 :</view>
				<view class="input"> {{ ShipmenPrice }} </view>
			</view>
			<view class="form_item">
				<view class="text"> 退货量:</view>
				<view class="input"> {{ returnNum }} </view>
			</view>
			<view class="form_item">
				<view class="text"> 退货金额: </view>
				<view class="input"> {{ returnPrice }} </view>
			</view>
			<view class="form_item">
				<view class="text"> 总金额:</view>
				<view class="input"> {{ totalPrice }} </view>
			</view>
			<view class="btn">
				<button @tap="MergeData">合并数据</button>
				<button @tap="ExpandData">展开数据</button>
				<button @tap="
            skip(
              `/pages/newOrder/index?orderIdSale=${orderIdSale}&type=${type}`
            )
          ">
					复制订单
				</button>
			</view>
			<image v-show="signUrl" style="
          width: 250rpx;
          height: 250rpx;
          background: #f1f1f1;
          padding: 10rpx;
          margin-top: 20rpx;
          border-radius: 10rpx;
        " :src="signUrl" alt="" />
		</view>
		<view class="article">
			<view class="title">
				<view class="text">出货清单</view>
				<view class="btn"> </view>
			</view>

			<view class="article_table">
				<myTable :proType="0" :data="list1" />
			</view>
		</view>
		<view class="article last">
			<view class="title">
				<view class="text">退货清单</view>
				<view class="btn"> </view>
			</view>
			<view class="article_table">
				<myTable :proType="1" :data="list2" />
			</view>
		</view>
		<view class="footer_btn">
			<button @tap="edit">修改</button>
			<button @tap="outOrder">打印订单</button>
		</view>
		<CustomerScreening ref="child" @saveUser="saveUser" />
		<u-calendar :show="show1" mode="single" @confirm="confirm"></u-calendar>
	</view>
</template>

<script>
	import CustomerScreening from "../../components/CustomerScreening.vue";
	import myTable from "../../components/table.vue";
	export default {
		data() {
			return {
				// 步进器
				value: 1000,
				// 客户
				user: "",
				// 日历
				show1: false,
				// 日历
				time: "",
				signUrl: "",
				// 数据展示
				dataShow: true,
				// 出货清单
				list1: [],
				// 退货清单
				list2: [],
				// 出货清单
				list1copy: [],
				// 退货清单
				list2copy: [],
				newList1: [],
				newList2: [],
				// 数据展示
				dataShow: true,
				type: 0,
				orderIdSale: "",
				cid: "",
			};
		},
		components: {
			CustomerScreening,
			myTable,
		},
		computed: {
			// 出货量
			ShipmenNum() {
				var num = 0;
				if (this.list1) {
					this.list1.forEach((item) => {
						num += +item.orderNum;
					});
					return num;
				}
			},
			// 出货金额
			ShipmenPrice() {
				var total = this.list1.reduce((pre, cur) => {
					return pre + +cur.orderNum * +cur.realPrice;
				}, 0);
				return total;
			},
			// 退货量
			returnNum() {
				var num = 0;
				if (this.list2) {
					this.list2.forEach((item) => {
						num += +item.orderNum;
					});
					return num;
				}
			},
			// 退货金额
			returnPrice() {
				var total = this.list2.reduce((pre, cur) => {
					return pre + +cur.orderNum * +cur.realPrice;
				}, 0);
				return total;
			},
			// 总金额
			totalPrice() {
				return this.ShipmenPrice - this.returnPrice;
			},
		},
		methods: {
			outOrder() {
				uni.redirectTo({
					url: "/pages/setup/Bluetooth",
				});
			},
			// 打开客户筛选
			open() {
				this.$refs.child.open();
			},
			saveUser(data) {
				// console.log(data);
				this.user = data.cname;
				this.$refs.child.close();
			},
			// 日历
			confirm(e) {
				this.show1 = false;
				this.time = e[0];
			},
			// 合并数据
			MergeData() {
				if (this.list1.length > 1) {
					if (this.dataShow) {
						this.list1.forEach((item) => {
							item.orderNum = +item.orderNum;
							item.realPrice = +item.realPrice;
							var p = this.newList1.find((p) => p.proId == item.proId);
							// console.log(p);
							if (p) {
								p.orderNum += item.orderNum;
								// p.realPrice += item.realPrice;
							} else {
								this.newList1.push(item);
							}
						});
						this.list1 = this.newList1;
						// 退货
						this.list2.forEach((item) => {
							item.orderNum = +item.orderNum;
							item.realPrice = +item.realPrice;
							var p = this.newList2.find((p) => p.proId == item.proId);
							if (p) {
								p.orderNum += item.orderNum;
								// p.realPrice += item.realPrice;
							} else {
								this.newList2.push(item);
							}
						});
						this.dataShow = false;
						this.list2 = this.newList2;
					}
				}
			},
			// 展开数据
			ExpandData() {
				this.newList1 = [];
				this.newList2 = [];
				if (!this.dataShow) {
					this.dataShow = true;
					if (this.type == "0") {
						this.$api
							.orderDetailApi({
								data: {
									orderIdSale: this.orderIdSale
								}
							})
							.then((res) => {
								this.list1 = res.result.sellList;
								this.list2 = res.result.returnList;
								this.user = res.result.orderSale.cname;
								this.time = res.result.orderSale.orderDay;
							});
					} else {
						this.$api
							.orderSaleTempListApi({
								data: {
									orderIdSale: this.orderIdSale
								}
							})
							.then((res) => {
								this.list1 = res.result.sellList;
								this.list2 = res.result.returnList;
								this.user = res.result.orderSale.cname;
								this.time = res.result.orderSale.orderDay;
							});
					}
				}
			},
			// 提交
			submit() {
				this.$api
					.orderCreateApi({
						cid: this.cid,
						details: this.list1,
						signUrl: "",
					})
					.then((res) => {
						console.log(res);
					});
				uni.showToast({
					title: "提交成功",
					icon: "none",
				});
			},
			// 挂单
			Registration() {
				this.$api
					.createSaveApi({
						cid: this.cid,
						details: this.list1,
						signUrl: "",
					})
					.then((res) => {
						if (res.code == 200) {
							console.log(res);
						}
					});
			},
			edit() {
				console.log(this.type);
				if (this.type == "0") {
					this.submit();
				} else {
					this.Registration();
				}
			},
			base64ImgtoFile(dataurl, filename = "sign") {
				let arr = dataurl.split(",");
				let mime = arr[0].match(/:(.*?);/)[1];
				let suffix = mime.split("/")[1];
				let bstr = atob(arr[1]);
				let n = bstr.length;
				let u8arr = new Uint8Array(n);
				while (n--) {
					u8arr[n] = bstr.charCodeAt(n);
				}
				return new File([u8arr], `${filename}.${suffix}`, {
					type: mime,
				});
			},
		},
		onLoad(option) {
			// orderSaleTempListApi
			console.lof
			this.type = option.type;
			this.orderIdSale = option.orderIdSale;
			this.cid = option.cid;

			this.$api
				.orderSaleTempListApi({
					data: {
						orderIdSale: option.orderIdSale
					}
				})
				.then((res) => {
					// console.log(res);
					this.list1 = res.result.sellList;
					this.list2 = res.result.returnList;
					this.list1copy = res.result.sellList;
					this.list2copy = res.result.returnList;
					this.user = res.result.orderSale.cname;
					this.time = res.result.orderSale.orderDay;
					this.signUrl = res.result.orderSale.signUrl;
				});

		},
	};
</script>

<style lang="scss" scoped>
	page {
		background: #f1f1f1;
		height: 100vh;
	}

	.newOrder {
		background-color: #f1f1f1;

		.form {
			padding: 38rpx 68rpx 32rpx 68rpx;
			background-color: #fff;

			// margin-top: 38rpx;
			.form_item {
				color: #bdbdbd;
				margin-bottom: 36rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.text {
					width: 30%;
					text-align: right;
					margin-right: 10rpx;

					text {
						color: #fe3430;
					}
				}

				.input {
					text-align: center;
					flex: 1;

					input {
						height: 64rpx;
						background: #f2f2f2;
						border-radius: 47rpx;
						text-align: left;
						text-indent: 1em;
						flex: 1;
					}
				}

				.input1 {
					text-align: center;
					flex: 1;
					display: flex;
					align-items: center;

					input {
						height: 64rpx;
						background: #f2f2f2;
						border-radius: 47rpx;
						text-align: left;
						text-indent: 1em;
						flex: 1;
					}

					.btn1 {
						height: 61rpx;
						width: 145rpx;
						line-height: 61rpx;
						background: #fe3430;
						border-radius: 31rpx;
						color: #fff;
						margin-left: 36rpx;
						text-align: center;
					}
				}
			}

			.btn {
				display: flex;

				button {
					height: 58rpx;
					line-height: 58rpx;
					background: #fe3430;
					border-radius: 49rpx;
					color: #fff;
					margin-left: 0;
					margin-right: 10rpx;
				}
			}
		}

		.article {
			padding: 32rpx 17rpx;

			.title {
				margin-bottom: 18rpx;
				font-size: 1.125rem;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-weight: 600;

				// .text {
				// 	background-color: #cfc;
				// 	width: 600rpx;
				// }

				.btn {
					// margin-left: 266rpx;
					display: flex;

					button {
						height: 61rpx;
						width: 145rpx;
						line-height: 61rpx;
						background: #fe3430;
						border-radius: 31rpx;
						color: #fff;
						margin-left: 36rpx;
					}
				}
			}

			.article_table {
				background: #ffffff;
				// height: 274rpx;
				border-radius: 20rpx;
				padding: 12rpx;
				box-sizing: border-box;
				color: #272727;
				position: relative;

				.title {
					height: 100rpx;
					display: flex;
					justify-content: space-around;
					align-items: center;
					border-bottom: 1px solid #f1f1f1;
				}

				.table_body {
					// background-color: #FE3430;

					.item {
						display: flex;
						justify-content: space-around;
					}
				}
			}
		}

		.last {
			margin-bottom: 180rpx;
		}

		.footer_btn {
			display: flex;
			position: fixed;
			bottom: 0rpx;
			margin-left: 50%;
			transform: translateX(-50%);
			background: #f1f1f1;
			width: 100%;
			padding: 30rpx 0;
			z-index: 999;

			button {
				background: url("/static/images/user/button.png");
				background-size: 220rpx 124rpx;
				width: 220rpx;
				height: 124rpx;
				line-height: 96rpx;
				color: #ffffff;
			}
		}
	}
</style>

